<template>
    <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto"
        class="demo-ruleForm" :size="formSize" status-icon>
        <el-form-item label="车牌号" prop="tyreBrand">
            <el-input v-model="ruleForm.tyreBrand" />
        </el-form-item>
        <el-form-item label="轮胎品牌" prop="tyreType">
            <el-input v-model="ruleForm.tyreType" />
        </el-form-item>
        <el-form-item label="规  格" prop="tyreSpec">
            <el-input v-model="ruleForm.tyreSpec" />
        </el-form-item>
        <el-form-item label="数量" prop="tyreNumber">
            <el-input-number v-model="ruleForm.tyreNumber" :min="1" :max="10" />
        </el-form-item>
        <el-form-item label="使用人" prop="tyreName">
            <el-input v-model="ruleForm.tyreName" />
        </el-form-item>
        <el-form-item label="使用日期" prop="tyreTime">
            <el-date-picker v-model="ruleForm.tyreTime" type="date" aria-label="Pick a date" placeholder="Pick a date"
                style="width: 100%" format="YYYY/MM/DD" value-format="YYYY-MM-DD" />
        </el-form-item>
        <el-form-item label="备   注" prop="tyreRemark">
            <el-input v-model="ruleForm.tyreRemark" type="textarea" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)">
                返回
            </el-button>
        </el-form-item>
    </el-form>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
import axios from 'axios';
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();
import { ElMessage, type ComponentSize, type FormInstance, type FormRules } from 'element-plus'

const ruleForm = reactive({
    "tyreId": route.query.id,
    "tyreBrand": "",
    "tyreType": "",
    "tyreSpec": "",
    "tyreNumber": "",
    "tyreName": "",
    "tyreTime": "",
    "tyreRemark": "",
    "firmId": "10086",
    "userId": 1,
    "createName": "张三",
    "createDate": "2024-11-20T14:40:49.0861106",
    "updateName": "张三"
})
const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules>({
    tyreBrand: [
        { required: true, message: '车牌号不能为空', trigger: 'change', },
    ],
    tyreType: [
        { required: true, message: '轮胎类型不能为空', trigger: 'change', },
    ],
    tyreSpec: [
        { required: true, message: '规格不能为空', trigger: 'change', },
    ],
    tyreNumber: [
        { required: true, message: '数量不能为空', trigger: 'change', },
    ],
    tyreName: [
        { required: true, message: '使用人不能为空', trigger: 'change', },
    ],
    tyreTime: [
        { required: true, message: '使用时间不能为空', trigger: 'change', },
    ],
    tyreRemark: [
        { required: true, message: '备注不能为空', trigger: 'change', },
    ],
})


const GetTyreId=()=>{
    axios.get("/ReadMaintent/api/Repairs/GetTyreId?id="+route.query.id)
    .then(res=>{
        ruleForm.tyreId=route.query.id,
    ruleForm.tyreBrand=res.data.data.tyreBrand,
    ruleForm.tyreType=res.data.data.tyreType,
    ruleForm.tyreSpec=res.data.data.tyreSpec,
    ruleForm.tyreNumber=res.data.data.tyreNumber,
    ruleForm.tyreName=res.data.data.tyreName,
    ruleForm.tyreTime=res.data.data.tyreTime,
    ruleForm.tyreRemark=res.data.data.tyreRemark,
    ruleForm.firmId=res.data.data.firmId,
    ruleForm.userId=res.data.data.userId,
    ruleForm.createName=res.data.data.createName,
    ruleForm.createDate=res.data.data.createDate
    })
}


const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            router.push({
                name:"TyreShwo"
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}

onMounted(()=>{
    GetTyreId()
})

</script>